<!-- 开发中 -->
<template>
    <div class="page-search">
      <BaseForm v-bind="props.config" v-model="formData" ref="baseFormRef">
        <template #footer>
          <div class="handle-btns">
            <el-button type="primary" @click="cancel">
              <Close style="margin-right: 5px;width: 1em;height: 1em;" />
               关闭
            </el-button>
          </div>
        </template>
      </BaseForm>
    </div>
  </template>
    

    <script setup>
    import { ref, defineProps } from 'vue'
    import BaseForm from './base-ui/BaseForm.vue'
    import {  Edit,Close } from '@element-plus/icons-vue'
    const emit = defineEmits(['submit', 'cancel']);
    
    const props = defineProps({
      config: {//v-model的字段,父组件传来的
        type: Object,
        require: true,
        default: () => ({})
      },
      transferData: {//v-model的字段,父组件传来的
        type: Object,
        require: true,
        default: () => ({})
      },
    });
    const baseFormRef = ref(null)
    // 1.优化一: 加载字段
    //2.优化二: 加载数据
    const formData =ref({
     ...props.transferData
    })
    
    // 3.优化三: 当用户点击搜索
    const submit = () => {
      baseFormRef.value.elformRef.validate((valid, fields) => {
        if (valid) {
          emit('submit', formData.value)
        } else {
        }
      })
      //emit('submit', formData.value)
    }
    const cancel = () => {
      emit('cancel')
    }
    </script>
      
    <style scoped>
    .header {
      color: red;
    }
    
    .handle-btns {
      text-align: center;
      padding: 0 50px 20px 0;
    }
    </style>
      